<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>


<html>
  <head>
  
  <link rel="stylesheet" type="text/css" href="plot.css" />
    
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 	<script type='text/javascript'>
	$(function() {
    	$('#myselect').change(function() {
    		hideAll();
    		var x = $(this).val();
    		if(x==1){ //pagina's per vak
    		$("#formTimePerCourse").show(1);
    		document.getElementById('title').innerHTML = 'Hours per course';
    		}
    		if(x==2){ //Time vs Ideal
        	$("#formTimevsIdeal").show(1); 
        	document.getElementById('title').innerHTML = 'Time vs Ideal Time';
    		}

    	});
	});
	
	function hideAll() {
	  
	  $("#formTimePerCourse").hide(0); 
  	  $("#formTimevsIdeal").hide(0); 
       
    }
	
	function show_settings() {
		$("#fullSettingsbox").toggle();	
		hideAll();
		$("#formTimePerCourse").show(0);
	}
	
	</script>

  <script type="text/javascript">
    
 google.load("visualization", "1", {packages:["corechart", 'table']});
 
      google.setOnLoadCallback(function(){
    	  $("#fullSettingsbox").hide(0);
    	  hideAll(); 
    	  initChart();
    	  initPremadeHash(); 
    	  fillData();                                                         
    	  drawChart();                                                                                    
    	}) 
      
      function initChart() {
    	  
    	  data = new google.visualization.DataTable();
    	  data.addColumn('string', 'Course');
          data.addColumn('number', 'Hours');
          data.addRows(3);
         
      }
      
      function initPremadeHash(){          
    	  <%
    	  HashMap<String, Integer> hoursPerCourse = new HashMap<String, Integer>();
    	  hoursPerCourse.put("Analyse",4);
    	  hoursPerCourse.put("Algebra",8);
    	  hoursPerCourse.put("Peno",21);
	      %>
      } 
      
      function fillData(){    	  
    	  <%
    	  Iterator it = hoursPerCourse.entrySet().iterator();
    	  int i = 0;
    	  while (it.hasNext()) {
    		  Map.Entry pairs = (Map.Entry)it.next();
    	  %> 
        
    	  var courseName = "<%=pairs.getKey()%>"
    	  var numberHours = <%=pairs.getValue()%>	
    	  data.setCell( <%=i%> , 0, courseName);
    	  data.setCell( <%=i%> , 1, numberHours);
               
    	  <%
    	  i++;
    	  }
    	  %>
      }
	
	  function drawChart(){
	  chart = new google.visualization.PieChart(document.getElementById('chart_div'));
	  chart.draw(data, 
	  {
		  width: 420, height: 300,
		  colors:['#39869b','#46a1b9','#7cbbcf','#b5d4e0'],
		  wmode: 'flash'
	  });
	  chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
	  chart.draw(data, 
	  {
		  width: 420, height: 300,
		  colors:['#39869b','#46a1b9','#7cbbcf','#b5d4e0'],
		  wmode: 'flash'
	  });
      }
	  
	  
	  
	  function UpdateChart (typeOfChart,divNumber) {
		 
		  if(typeOfChart=="0"){
			  chart = new google.visualization.PieChart(document.getElementById(divNumber));
		  }
		  else if(typeOfChart=="1"){ 
			  chart = new google.visualization.BarChart(document.getElementById(divNumber));
		  }
		  else if(typeOfChart=="2"){ 
			  chart = new google.visualization.Table(document.getElementById(divNumber));
		  }
		  chart.draw(data, {width: 420, height: 300,colors:['#39869b','#46a1b9','#7cbbcf','#b5d4e0']});
		    
	  }
	  
	  
	  
	  function updateChart2(form){ 
		  
		  show_settings(); //kaderke verbergen
		  data = new google.visualization.DataTable();
    	  data.addColumn('string', 'Course');
          data.addColumn('number', 'Hours'); 
          
           i=0;
		    for (w = 0; w < form.elements.length; w++ ) {
		            if (form.elements[w].checked == true) {
		            	data.addRow();
		            	data.setCell( i , 0, form.elements[w].name);
		          	    data.setCell( i , 1, parseInt(form.elements[w].value));
		          	    i++;
		            }
		        }
		    	    
		    if (i!=0){
		    typeOfChart = form.typeOfChart.value;
		    divNumber = form.divid2.value;
		    UpdateChart (typeOfChart, divNumber);
		    }
		    else if (i==0){
		    	alert("U moet minstens 1 vak selecteren.");	
		    } 
		  
      } 
	  
	 	  
    </script>  
    
    
  </head>

  <body>
  
    
  <div id="top">
	  <div id="title">Hours per Course</div>
	  <div id="settings"><img src="edit.png" alt="edit" onClick="show_settings();" /></div>
  </div>
  <div class="chart_div" id="chart_div"></div>
  <div id="top" style="position: relative; left: 500px">
	  <div id="title" style="position: relative; left: 500px">Hours per course</div>
	  <div id="settings" style="position: relative; left: 500px"><img src="edit.png" alt="edit" onClick="show_settings();" /></div>
  </div>
  <div class="chart_div" id="chart_div2" style="position: absolute; left: 500px"></div>
  
<div id="fullSettingsbox">  
    
 <form name="input" method="get">
		
    </br>
	<select id='myselect'>
    	<option value='1'>Hours per course</option>
    	<option value='2'>Time vs. Ideal time</option>
	</select>

</form> 
    
    <div id="formTimePerCourse">
    
	
	 
    <form name="input" method="get">
    
    <select name="divid2">
	<option value="chart_div">div1</option>
	<option value="chart_div2">div2</option>
	</select>
    
    <select name="typeOfChart">
    <option value="0">Pie chart</option>
    <option value="1">Bar chart</option>
    <option value="2">Table</option>
    </select>
    </br>
    
            
      <%
      Iterator it2 = hoursPerCourse.entrySet().iterator();
	  int k = 0;
	  while (it2.hasNext()) {
		  Map.Entry pairs = (Map.Entry)it2.next();
	  %> 
	  	  
	  <input type="checkbox" name="<%=pairs.getKey()%>" value="<%=pairs.getValue()%>" /> <%=pairs.getKey()%> </br>
	  	       
	  <%
	  k++;
	  }
	  %>
	
	  <INPUT TYPE="button" NAME="btnUpdate" Value="Update" onClick="updateChart2(this.form)">
	  </form> 
	 </div> 
    
    <div id="formTimevsIdeal">
    Time vs Ideal
	</div>  
</div>	
	
  </body>
</html>